---
section: Box Alignment
title: Align Content
slug: /docs/align-content/
---

# Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

<carbon-ad />

| React props              | CSS Properties              |
| ------------------------ | --------------------------- |
| `alignContent={keyword}` | `align-content: {keyword};` |

## Start

Use `alignContent="flex-start"` to pack rows in a container against the start of the cross axis:

```jsx preview color=red
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="flex-start"
      bg="red-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="red-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="flex-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

## Center

Use `alignContent="center"` to pack rows in a container in the center of the cross axis:

```jsx preview color=indigo
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="center"
      bg="indigo-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="indigo-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

## End

Use `alignContent="flex-end"` to pack rows in a container against the end of the cross axis:

```jsx preview color=emerald
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="flex-end"
      bg="emerald-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="emerald-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

## Space between

Use `alignContent="space-between"` to distribute rows in a container such that there is an equal amount of space between each line:

```jsx preview color=amber
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="space-between"
      bg="amber-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="amber-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

## Space around

Use `alignContent="space-around"` to distribute rows in a container such that there is an equal amount of space around each line:

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      h={48}
      display="flex"
      flexWrap="wrap"
      alignContent="space-around"
      bg="light-blue-200"
      borderRadius="md"
    >
      {Array.from({ length: 5 }, (_, index) => index + 1).map((value) => (
        <x.div key={value} w={1 / 3} p={2}>
          <x.div
            p={2}
            borderRadius="md"
            bg="light-blue-500"
            color="white"
            display="flex"
            alignItems="center"
            justifyContent="center"
            fontSize="2xl"
            fontWeight="extrabold"
          >
            {value}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div h={48} display="flex" flexWrap="wrap" alignContent="space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </x.div>
</>
```

## Responsive

To control the alignment of flex content at a specific breakpoint, use responsive object notation. For example, adding the property `alignContent={{ md: "center" }}` to an element would apply the `alignContent="center` utility at medium screen sizes and above.

```jsx
<x.div display="grid" alignContent={{ md: 'center' }}>
  {/* ... */}
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
